<template>
  <!-- 第一版登录ui -->
  <div class="login">
    <div class="container right-panel-active">
      <!-- 注册 -->
      <div class="container__form container--signup">
        <form action="#" class="form" id="form1">
          <h2 class="form__title">Sign Up</h2>
          <el-form
            :model="ruleForm1"
            :rules="rules1"
            ref="ruleForm1"
            label-width="80px"
          >
            <el-form-item label="帐号：" prop="username">
              <el-input
                v-model="ruleForm1.username"
                placeholder="请输入学号"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input
                v-model="ruleForm1.password"
                placeholder="请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="width: 100%"
                @click="login('ruleForm1')"
                >注册</el-button
              >
            </el-form-item>
          </el-form>
        </form>
      </div>

      <!-- 登录 -->
      <div class="container__form container--signin">
        <form action="#" class="form" id="form2">
          <h2 class="form__title">Sign In</h2>
          <el-form
            :model="ruleForm2"
            :rules="rules2"
            ref="ruleForm2"
            label-width="80px"
          >
            <el-form-item label="学号：" prop="username">
              <el-input
                v-model="ruleForm2.username"
                placeholder="请输入学号"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input
                v-model="ruleForm2.password"
                placeholder="请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="width: 100%"
                @click="login('ruleForm2')"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
          <a href="#" class="link">如若忘记了密码，点击这里找回。</a>
        </form>
      </div>

      <!-- Overlay -->
      <div class="container__overlay">
        <div class="overlay">
          <div class="overlay__panel overlay--left">
            <button class="btn" id="signIn">登录</button>
          </div>
          <div class="overlay__panel overlay--right">
            <button class="btn" id="signUp">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import service from "../utils/request";
import Mock from "../utils/mock";
import {post} from '@/utils/http.js'
import {setToken} from "@/utils/auth"
export default {
  data() {
    return {
      name: "",
      // 注册为1，登录为2
      ruleForm1: {
        username: "",
        password: "",
      },
      ruleForm2: {
        username: "",
        password: "",
      },
      rules1: {
        username: [
          { required: true, message: "请输入学号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" },
        ],
      },
      rules2: {
        username: [
          { required: true, message: "请输入学号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    // 'sign_in.tel'(){
    //   console.log(this.sign_in.tel)
    // },
  },
  methods: {
    // 登录与注册样式切换
    toogle() {
      const signInBtn = document.getElementById("signIn");
      const signUpBtn = document.getElementById("signUp");
      const fistForm = document.getElementById("form1");
      const secondForm = document.getElementById("form2");
      const container = document.querySelector(".container");

      signInBtn.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
      });

      signUpBtn.addEventListener("click", () => {
        container.classList.add("right-panel-active");
      });

      fistForm.addEventListener("submit", (e) => e.preventDefault());
      secondForm.addEventListener("submit", (e) => e.preventDefault());
    },
    // 登录函数
    login(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          // 注册
          if(ruleForm==='ruleForm1'){
            post("/zhuche", this.ruleForm1).then(
            (res) => {
              this.$message({
                type: "success",
                message: res.message,
              });
              setToken(res.token);
              sessionStorage.setItem("nickname", res.nickname);
              this.$router.push("/");
            },
            (error) => {
              console.log(error);
            }
          );
          }
          // 登录
          if(ruleForm==='ruleForm2'){
            post("/login", this.ruleForm2).then(
            (res) => {
              this.$message({
                type: "success",
                message: res.message,
              });
              setToken(res.token);
              sessionStorage.setItem("nickname", res.nickname);
              this.$router.push("/");
            },
            (error) => {
              console.log(error);
            }
          );
          }
        }
      });
    },
  },
  mounted() {
    this.toogle();
  },
};
</script>

<style scoped>
.login {
  align-items: center;
  background-color: var(--white);
  background: url("../assets/login_bg.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
}
.form__title {
  font-weight: 300;
  margin: 0;
  margin-bottom: 1.25rem;
}

.link {
  color: var(--gray);
  font-size: 0.9rem;
  margin: 1.5rem 0;
  text-decoration: none;
}

.container {
  background-color: var(--white);
  border-radius: var(--button-radius);
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  height: var(--max-height);
  max-width: var(--max-width);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.container__form {
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.6s ease-in-out;
}

.container--signin {
  left: 0;
  width: 50%;
  z-index: 2;
}

.right-panel-active .container--signin {
  transform: translateX(100%);
}

.container--signup {
  left: 0;
  opacity: 0;
  width: 50%;
  z-index: 1;
}

.right-panel-active .container--signup {
  -webkit-animation: show 0.6s;
  animation: show 0.6s;
  opacity: 1;
  transform: translateX(100%);
  z-index: 5;
}

.container__overlay {
  height: 100%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: transform 0.6s ease-in-out;
  width: 50%;
  z-index: 100;
}

.right-panel-active .container__overlay {
  transform: translateX(-100%);
}

.overlay {
  background-color: var(--lightblue);
  background: url("../assets/login_bg.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: -100%;
  position: relative;
  /* transform: translateX(0); */
  transition: transform 0.6s ease-in-out;
  width: 200%;
}

.right-panel-active .overlay {
  transform: translateX(50%);
}

.overlay__panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 50%;
}

.overlay--left {
  transform: translateX(-30%);
}

.right-panel-active .overlay--left {
  transform: translateX(0);
}

.overlay--right {
  right: 0;
  transform: translateX(0);
}

.right-panel-active .overlay--right {
  transform: translateX(30%);
}

.btn {
  background-color: var(--blue);
  background-image: linear-gradient(
    90deg,
    var(--blue) 0%,
    var(--lightblue) 74%
  );
  border-radius: 20px;
  border: 1px solid var(--blue);
  color: var(--white);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
}

.form > .btn {
  margin-top: 1.5rem;
}

.btn:active {
  transform: scale(0.95);
}

.btn:focus {
  outline: none;
}

.form {
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 3rem;
  height: 100%;
  text-align: center;
}
.input {
  background-color: #fff;
  border: none;
  padding: 0.9rem 0.9rem;
  margin: 0.5rem 0;
  width: 100%;
}

@-webkit-keyframes show {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }

  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}

@keyframes show {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }

  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}
</style>